<template>
  <div class="customer">
    <div class="visited_info">
      <div class="visited_header">
        <span>拜访</span>
      </div>
      <div class="line"></div>
      <div class="detail">
        <div class="doctor_info">
          <div class="doctor_avtar">
            <div class="avatar">
              <span>{{avatar.substr(0,1)}}</span>
            </div>
          </div>
          <div class="specific_info">
            <div class="doctor_name">
              <span v-if="!doctor_info">当前代表下无该医生</span>
              <span v-if="doctor_info">{{doctor_info.doctorName}}</span>
              <img src="../../assets/common/man.svg" alt="" v-if="doctor_info && doctor_info.gender === '男'">
              <img src="../../assets/common/woman.svg" alt="" v-if="doctor_info && doctor_info.gender === '女'">
            </div>
            <div class="address">
              <span v-if="doctor_info">{{doctor_info.hospitalName}}</span>
            </div>
            <div class="unknow_info" v-if="!doctor_info">
              <span>未知</span>
            </div>
            <div class="promit" v-if="doctor_info">
              <span>提示</span>
              <span>医生倾向于通过电话沟通，很少使用微信。</span>
            </div>
          </div>
        </div>
        <div class="record">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <div class="basic_info" v-if="doctor_info">
                <div class="doctor_info doctor_name">
                  <span>医生姓名：</span>
                  <span>{{doctor_info.doctorName}}</span>
                </div>
                <div class="doctor_info doctor_sex">
                  <span>医生性别：</span>
                  <span>{{doctor_info.gender}}</span>
                </div>
                <div class="doctor_info doctor_age">
                  <span>医生年龄：</span>
                  <span>{{doctor_info.age}}</span>
                </div>
                <div class="doctor_info hosiptal_address">
                  <span>所属医院：</span>
                  <span>{{doctor_info.hospitalName}}</span>
                </div>
                <div class="doctor_info department">
                  <span>医生所在科室：</span>
                  <span>{{doctor_info.depart}}</span>
                </div>
                <div class="doctor_info doctor_position">
                  <span>职务：</span>
                  <span>{{doctor_info.executeTitle}}</span>
                </div>
                <div class="doctor_info tech_title">
                  <span>技术职称：</span>
                  <span>{{doctor_info.techTitle}}</span>
                </div>
                <div class="doctor_info academic_title">
                  <span>学术职称：</span>
                  <span>{{doctor_info.academicTitle ? doctor_info.academicTitle : '无'}}</span>
                </div>
                <div class="doctor_info bed_number">
                  <span>管理床位数：</span>
                  <span>{{doctor_info.beds}}</span>
                </div>
                <div class="doctor_info patients_number">
                  <span>每周门诊患者数量：</span>
                  <span>{{doctor_info.weeklyPatients}}</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="产品信息" name="second" class="production">
              <div class="basic_info" v-if="doctor_product.length">
                <div class="doctor_info product_name">
                  <span>产品线名称：</span>
                  <el-select
                    v-model="selected_product_name"
                    placeholder="请选择"
                    v-if="is_multiple_product"
                    @change="changeProductInfo">
                    <el-option
                      v-for="item in selected_production"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <span v-else>{{doctor_product[0].name}}</span>
                </div>
                <div>
                  <div class="doctor_info doctor_sex">
                    <span>英文名：</span>
                    <span>{{doctor_product_info.enName}}</span>
                  </div>
                  <div class="doctor_info doctor_position">
                    <span>备注：</span>
                    <span>{{doctor_product_info.memo}}</span>
                  </div>
                  <div class="doctor_info department">
                    <span>产品关键词：</span>
                    <span>{{doctor_product_info.pkeyWord}}</span>
                  </div>
                  <div class="doctor_info doctor_name">
                    <span>竞品关键词：</span>
                    <span>{{doctor_product_info.ckeyWord}}</span>
                  </div>
                  <div class="doctor_info doctor_age">
                    <span>药企：</span>
                    <span>{{doctor_product_info.enterpriseName}}</span>
                  </div>
                  <div class="doctor_info department">
                    <span>项目名称：</span>
                    <span>{{doctor_product_info.projectName}}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="微信聊天记录" name="four">
              <div class="wechat_rept" v-if="wechat_rept_info.length">
                <span class="name">微信代表:</span>
                <el-select
                  v-model="wechat_rept_name"
                  placeholder="请选择微信代表"
                  filterable
                  clearable
                  @change="getWechatTalkInfo(wechat_rept_name)"
                  v-if="is_multiple_wechat_rept">
                  <el-option
                    v-for="item in wechat_rept_info"
                    :key="item.repId"
                    :label="item.name"
                    :value="item.repId">
                  </el-option>
                </el-select>
                <span v-else>{{wechat_rept_user}}</span>
              </div>
              <div class="wx_chat_record" v-if="wechat_info && wechat_info.length">
                <div class="up">
                  <img v-if="wechat_info.is_up" src="../../assets/image/up.png" alt="" @click="get_next_page_info">
                </div>
                <div class="content">
                  <div :class="{main:item.is_doctor === false ? false : true,main_right:item.is_doctor === true ? false : true}" v-for="item in wechat_info" :key="item.id">
                    <div class="talk_content" v-if="item.is_doctor === true">
                      <span class="user_name">{{item.user_name | subName}}</span>
                      <span :class="{talk:true,talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,talk_link:item.msgType === 'link' ? true : false,talk_audio:item.msgType === 'voice' ? true : false}">
                        <!-- 文字 -->
                        <span v-if="item.msgType === 'text'">{{item.msgContent.content}}</span>
                        <!-- 图片，表情 -->
                        <el-image
                        v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                        :src="item.msgContent.content"
                        fit="cover"
                        :preview-src-list="item.srcList"></el-image>
                        <!-- 音频 -->
                        <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                          <audio
                            ref="audio"
                            :src="item.msgContent.content"
                            @loadedmetadata="onLoadedMetaData($event,item)"
                            @timeupdate="onTimeUpdate($event,item)"
                          ></audio>
                          <div class="cricleplay">
                            <div class="small"></div>
                            <div :class="{middle:true,stopanimate:item.audio_play == false ? true : false}"></div>
                            <div :class="{large:true,stopanimate:item.audio_play == false ? true : false}"></div>
                          </div>
                          <div class="audio_duration">{{parseInt(item.audio_duration)}}</div>
                        </div>
                        <!-- 视频 -->
                        <video
                        v-if="item.msgType === 'video'"
                        :src="item.msgContent.content"
                        controls
                        width="300" height="150"
                        style="object-fit: cover"
                        />
                        <!-- 链接 -->
                        <el-link
                          v-if="item.msgType === 'link'"
                          :href="item.msgContent.link_url"
                          target="_blank"
                          :underline="false">
                          <h4>{{item.msgContent.title}}</h4>
                          <div class="description">
                            <div>{{item.msgContent.description}}</div>
                            <img :src="item.msgContent.image_url"/>
                          </div>
                        </el-link>
                      </span>
                    </div>
                    <div class="talk_content_right" v-if="item.is_doctor === false">
                      <span :class="{talk_right:true,talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,talk_link:item.msgType === 'link' ? true : false,talk_audio:item.msgType === 'voice' ? true : false}">
                        <!-- 文字 -->
                        <span v-if="item.msgType === 'text'">{{item.msgContent.content}}</span>
                        <!-- 图片，表情 -->
                        <el-image
                        v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                        :src="item.msgContent.content"
                        fit="cover"
                        :preview-src-list="item.srcList"></el-image>
                        <!-- 音频 -->
                        <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                          <audio
                            ref="audio"
                            :src="item.msgContent.content"
                            @loadedmetadata="onLoadedMetaData($event,item)"
                            @timeupdate="onTimeUpdate($event,item)"
                          ></audio>
                          <div class="cricleplay">
                            <div class="small"></div>
                            <div :class="{middle:true,stopanimate:item.audio_play === false ? true : false}"></div>
                            <div :class="{large:true,stopanimate:item.audio_play === false ? true : false}"></div>
                          </div>
                          <div class="audio_duration">{{parseInt(item.audio_duration)}}</div>
                        </div>
                        <!-- 视频 -->
                        <video
                        v-if="item.msgType === 'video'"
                        :src="item.msgContent.content"
                        controls
                        width="300" height="150"
                        style="object-fit: cover"
                        />
                        <!-- 链接 -->
                        <el-link
                          v-if="item.msgType === 'link'"
                          :href="item.msgContent.link_url"
                          target="_blank"
                          :underline="false">
                          <h4>{{item.msgContent.title}}</h4>
                          <div class="description">
                            <div>{{item.msgContent.description}}</div>
                            <img :src="item.msgContent.image_url"/>
                          </div>
                        </el-link>
                      </span>
                      <span class="user_name_right">{{item.user_name | subName}}</span>
                    </div>
                    <div :class="{talk_time:item.is_doctor === false ? false : true,talk_time_right:item.is_doctor === true ? false : true}">
                      {{item.msgTime}}
                    </div>
                  </div>
                </div>
                <div class="down">
                </div>
              </div>
              <div v-if="!wechat_info.length" style="font-size:14px;">
                <span>暂无微信聊天记录</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="微信拜访结果" name="third">
              <div class="wechat_result_info" v-if="wechat_result_info.length">
                <div class="wechat_result" v-for="item in wechat_result_info" :key="item.id">
                  <div class="communicate_result">
                    <span>沟通内容：</span>
                    <span>{{item.communicateResult}}</span>
                  </div>
                  <div class="operation_time">
                    <span>填报时间：</span>
                    <span>{{item.operationTime}}</span>
                  </div>
                </div>
              </div>
              <div class="wechat_result_info" v-else>
                <span>暂无微信拜访结果</span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="add_visited">
      <div class="visited_header">
        <span>拜访结果</span>
      </div>
      <div class="line"></div>
      <div class="add_visited_info">
        <div class="visited_info1">
          <div class="visited_result">
            <div class="visit visited_purpose">
              <span>拜访目的：</span>
              <span>{{result_info.callRecordPurpose}}</span>
            </div>
            <div class="visit result">
              <span>拜访结果：</span>
              <span>{{result_info.callRecordResult}}</span>
            </div>
            <div class="visit result">
              <span>拜访次数：</span>
              <span>{{result_info.visitsNumber}}</span>
            </div>
            <div class="visit visited_tag">
              <span class="visited_text">医生标签：</span>
              <span>{{result_info.callRecordTag}}</span>
            </div>
            <div class="visit doctor_level">
              <span class="visited_text">医生等级：</span>
              <span>{{result_info.clientGrade}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="call">
        <div class="visited_header">
          <span>本次通话</span>
        </div>
        <div class="line"></div>
        <div class="call_info">
          <div class="call_desc">
            <span>通话状态描述：</span>
            <span>{{result_info.callStatusDesc}}</span>
          </div>
          <div class="product">
            <span>产品：</span>
            <span>{{result_info.productName}}</span>
          </div>
          <div class="with_ae">
            <span class="with_ae_label">是否有AE：</span>
            <span>{{result_info.withAe}}</span>
          </div>
          <div class="lost">
            <span class="lost_label">是否脱落：</span>
            <span>{{result_info.isLost}}</span>
          </div>
          <div class="doctor_attitude">
            <span>医生态度：</span>
            <el-rate
                v-if="result_info.attitude"
                v-model="result_info.attitude"
                disabled
                :texts="texts"
                show-text
                text-color="#ff9900"
                disabled-void-color="rgb(214 218 224)">
            </el-rate>
            <span v-else>--</span>
          </div>
          <div class="bed_number">
            <span>每周门诊患者数量：</span>
            <span>{{result_info.weeklyPatients}}</span>
          </div>
          <div class="patients_number">
            <span>管理床位数：</span>
            <span>{{result_info.beds}}</span>
          </div>
          <div class="visited_time">
            <span class="demonstration">下次拜访时间：</span>
            <span>{{result_info.nextCallTime}}</span>
          </div>
          <div class="cancer_number">
            <span>每月管理多少癌症患者：</span>
            <span>{{result_info.monthlyCancerPatients}}</span>
          </div>
          <div class="cancer_type">
            <span>主要接诊哪些癌种的患者：</span>
            <span>{{result_info.cancerPatientsType}}</span>
          </div>
          <div class="is_application">
            <span>放化疗、靶向、免疫治疗方案您是否都应用：</span>
            <span>{{result_info.chemoradiotherapyTargetedImmunotherapy}}</span>
          </div>
          <div class="cancer_one">
            <span>癌种1治疗方案：</span>
            <span>{{result_info.cancerTreatmentOne}}</span>
          </div>
          <div class="cancer_two">
            <span>癌种2治疗方案：</span>
            <span>{{result_info.cancerTreatmentTwo}}</span>
          </div>
          <div class="cancer_three">
            <span>癌种3治疗方案：</span>
            <span>{{result_info.cancerTreatmentThree}}</span>
          </div>
          <div class="use_product">
            <span>使用产品名：</span>
            <span>{{result_info.useProductName}}</span>
          </div>
          <div class="pd_proportion">
            <span>各PD1使用比例：</span>
            <span>{{result_info.eachRoportionPD1}}</span>
          </div>
          <div class="use_proportion">
            <span>使用PD1的患者比例：</span>
            <span>{{result_info.patientsProportionPD1}}</span>
          </div>
          <div class="hospital_use_product">
            <span>医院在用的有哪些产品：</span>
            <span>{{result_info.hospitalUseProduct}}</span>
          </div>
          <div class="not_pd_reason">
            <span>不使用PD1的原因：</span>
            <span>{{result_info.notUsingReasonsPD1}}</span>
          </div>
          <div class="not_profit_reason">
            <span>不用拓益的原因：</span>
            <span>{{result_info.notUsingReasonsPD1}}</span>
          </div>
          <div class="success_recruiting">
            <span>是否成功招募：</span>
            <span>{{result_info.notUsingReasonsTuoyi}}</span>
          </div>
          <div class="remark">
            <span>备注：</span>
            <span>{{result_info.memo}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api, baseAjax } from '../../api/api';
import Cookies from 'js-cookie';
import { statusCode } from '../../utils/index';
import { formatDate } from '../../utils/validate';

export default {
  data(){
    return {
      activeName: 'first',
      checked:false,  //是否被成功招募
      user_info:[],
      doctor_info:{},  //医生基本信息
      doctor_product:[],  //医生对应的产品信息
      doctor_product_info:{},
      role_id:[],  //角色id
      is_add_info:true,  //保存按钮是否可点击
      wechat_info:[],  //微信聊天记录信息
      wechat_page_info:[],  //微信聊天记录每页信息
      avatar:'',   //头像
      wechat_page:{   //微信聊天记录页码
        current_page:1,   //当前页
        total_pages:0,   //总页数
        count:0,   //总条数
        page_size:0,   //每页显示条数
        up_page_count:0   //当前页之前的总条数
      },
      is_multiple_product:false,   //产品是否有多个
      selected_product_name:'',   //默认选中的产品线名称
      selected_production:[],   //产品线名称
      result_info:{},
      texts:['极差','失望','一般','满意','非常满意'],
      wechat_result_info:[],   //微信拜访结果
      wechat_rept_info:[],   //微信代表
      wechat_rept_name:'',   //选中的微信代表id
      wechat_rept_user:'',   //选中的微信代表名字
      is_multiple_wechat_rept:false,  //是否有多个微信代表
    }
  },
  mounted(){
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
    this.result_info = JSON.parse(Cookies.get('visit_result_info'));
    this.formatData();
    this.getDoctorInfo();  //获取医生基本信息
    this.getDoctorProduct();   //获取医生对应产品信息
    // this.getWechatTalkInfo();//获取微信代表与医生聊天信息
    this.getWechatResult();//获取微信拜访结果
    this.getWechatRept();  //获取微信代表
  },
  methods: {
    formatData(){
        this.result_info.callRecordPurpose = !this.result_info.callRecordPurpose.length || this.result_info.callRecordPurpose === '无' ? '--' : this.result_info.callRecordPurpose;
        this.result_info.callRecordResult = !this.result_info.callRecordResult.length || this.result_info.callRecordResult === '无' ? '--' : this.result_info.callRecordResult;
        this.result_info.visitsNumber = this.result_info.visitsNumber === '' || this.result_info.visitsNumber === '无' ? '--' : this.result_info.visitsNumber;
        this.result_info.callRecordTag = !this.result_info.callRecordTag.length || this.result_info.callRecordTag === '无' ? '--' : this.result_info.callRecordTag;
        this.result_info.clientGrade = !this.result_info.clientGrade.length || this.result_info.clientGrade === '无' ? '--' : this.result_info.clientGrade;
        this.result_info.productName = this.result_info.productName ? this.result_info.productName : '--';
        this.result_info.withAe = this.result_info.withAe ? this.result_info.withAe : '--';
        this.result_info.isLost = this.result_info.isLost ? this.result_info.isLost : '--';
        this.result_info.weeklyPatients = this.result_info.weeklyPatients ? this.result_info.weeklyPatients : '--';
        this.result_info.beds = this.result_info.beds ? this.result_info.beds : '--';
        this.result_info.monthlyCancerPatients = this.result_info.monthlyCancerPatients ? this.result_info.monthlyCancerPatients : '--';
        this.result_info.cancerPatientsType = this.result_info.cancerPatientsType.length ? this.result_info.cancerPatientsType.join(",") : '--';
        this.result_info.chemoradiotherapyTargetedImmunotherapy = this.result_info.chemoradiotherapyTargetedImmunotherapy.length ? this.result_info.chemoradiotherapyTargetedImmunotherapy.join(",") : '--';
        this.result_info.callStatusDesc = this.result_info.callStatusDesc ? this.result_info.callStatusDesc : '--';
        this.result_info.nextCallTime = this.result_info.nextCallTime ? this.result_info.nextCallTime : '--';
        this.result_info.isRecruit = this.result_info.isRecruit ? this.result_info.isRecruit : '--';
        this.result_info.memo = this.result_info.memo ? this.result_info.memo : '--';
        this.result_info.isRecruit = this.result_info.isRecruit === '已招募' ? '是' : '否';
    },
    //获取医生基本信息
    getDoctorInfo(){
      let that = this;
      api.doctor_info = {
        url : api.doctor_info_url + '?' + 'doctorId' + '=' + Number(this.result_info.doctorId),
        method: api.doctor_info.method
      };
      baseAjax(api.doctor_info, '', (res)=>{
        if(res.code === statusCode.success){
          that.doctor_info = res.data;
          that.avatar = that.doctor_info ? that.doctor_info.doctorName : '';
        }else if(res.code === statusCode.not_login){
          that.$alert('用户未登录,请重新登录').then(()=>{
            that.$store.dispatch('user/resetToken').then(()=>{
              location.reload()  // 为了重新实例化vue-router对象 避免bug
            })
            that.$router.replace('/login');
          });
        }
      })
    },
    //获取医生对应产品信息
    getDoctorProduct(){
      let that = this;
      api.doctor_product = {
        url : api.doctor_product_url + '?' + 'repId' + '=' + this.user_info.repId + '&' + 'doctorId' + '=' + Number(this.result_info.doctorId),
        method: api.doctor_product.method
      };
      baseAjax(api.doctor_product, '', (res)=>{
        if(res.code === statusCode.success){
          let {data} = res;
          that.doctor_product = data.length ? data : [];
          that.doctor_product_info = data.length ? data[0] : [];
          //产品名称
          that.doctor_product.forEach(item=>{
            that.selected_production.push({
              id:item.id,
              name:item.name
            });
          });
          that.selected_product_name = that.selected_production[0].id;
          if(that.selected_production.length > 1){
            that.is_multiple_product = true;
          }else{
            that.is_multiple_product = false;
          }
        }
      })
    },
    //获取微信代表与医生聊天信息
    getWechatTalkInfo(wechat_rept_id){
      this.wechat_info = [];
      let that = this;
      if(wechat_rept_id){
        this.wechat_rept_info.forEach(rept=>{
          if(wechat_rept_id === rept.repId){
            that.wechat_rept_user = rept.name;
          }
        });
      }
      api.get_wechat_talk_info = {
        url : api.get_wechat_talk_info_url+'?repId='+this.wechat_rept_name+'&doctroId='+this.result_info.doctorId+'&wechatType=corp&page='+this.wechat_page.current_page,
        method: api.get_wechat_talk_info.method
      }
      baseAjax(api.get_wechat_talk_info, '', (res)=>{
        if(res.code === statusCode.success){
          if(res.data){
            let { wechatMsg, remark, repWechatId, currentPage, totalMsg, totalPages } = res.data;
            that.wechat_page_info = wechatMsg ? wechatMsg : [];
            that.wechat_page_info.forEach(item=>{
              item.msgContent = JSON.parse(item.msgContent);
              if(item.msgType === 'image'){
                item.srcList = [
                  item.msgContent.content
                ];
              }
              item.user_name = item.from === repWechatId ? that.wechat_rept_user : this.avatar;
              item.is_doctor = item.from === repWechatId ? false : true;
              item.audio_duration = null;
              item.audio_play = false;
              item.audio_currentTime = null;
            });
            that.wechat_page.current_page = currentPage;
            that.wechat_page.total_pages = totalPages;
            that.wechat_page.count = totalMsg;
            that.wechat_page.page_size = that.wechat_page_info.length;
            if(that.wechat_page.current_page > 1 && that.wechat_page.current_page !== that.wechat_page.total_pages){
              that.wechat_page.up_page_count = that.wechat_page.page_size * (that.wechat_page.current_page - 1);
            }else{
              that.wechat_page.up_page_count = that.wechat_page.count - that.wechat_page.page_size;
            }
            that.wechat_info.unshift(that.wechat_page_info.reverse());
            that.wechat_info = that.wechat_info.flat();
            let num = -1;
            that.wechat_info.forEach(val=>{
              if(val.msgType === 'voice'){
                num = num + 1;
                val.voice_num = num;
              }
            });
            console.log(that.wechat_info)

            that.wechat_info.is_up = that.wechat_page.current_page === that.wechat_page.total_pages ? false : true;
          }
        }
      })
    },
    //获取微信聊天记录上一页数据
    get_up_page_info(){
      this.wechat_page.current_page = this.wechat_page.current_page === 1 ? 1 : this.wechat_page.current_page - 1;
      this.getWechatTalkInfo(null);
    },
    //获取微信聊天记录下一页数据
    get_next_page_info(){
      this.wechat_page.current_page = this.wechat_page.current_page === this.wechat_page.total_pages ? this.wechat_page.total_pages : this.wechat_page.current_page + 1;
      this.getWechatTalkInfo();
    },
    //根据产品id获取产品信息
    changeProductInfo(id){
      let that = this;
      this.doctor_product.forEach(item=>{
        if(id === item.id){
          that.doctor_product_info = item;
        }
      });
    },
    //获取微信拜访结果
    getWechatResult(){
      let that = this;
      api.get_wechat_result = {
        url:api.get_wechat_result_url +'?doctorId='+this.result_info.doctorId,
        method:api.get_wechat_result.method
      }
      baseAjax(api.get_wechat_result, '', (res)=>{
        if(res.code === statusCode.success){
          that.wechat_result_info = res.data;
        }
      });
    },
    //获取微信代表
    getWechatRept(){
      let that = this;
      api.get_wechat_rept = {
        url:api.get_wechat_rept_url+this.result_info.doctorId,
        method:api.get_wechat_rept.method
      }
      baseAjax(api.get_wechat_rept, '', (res)=>{
        if(res.code === statusCode.success){
          that.wechat_rept_info = res.data;
          if(that.wechat_rept_info.length > 1){
            that.is_multiple_wechat_rept = true;
          }else if(that.wechat_rept_info.length === 1){
            that.wechat_rept_name = that.wechat_rept_info[0].repId;
            that.wechat_rept_user = that.wechat_rept_info[0].name;
          }else{
            that.is_multiple_wechat_rept = false;
          }
          that.getWechatTalkInfo(null);
        }
      });
    },
    //录音总时长
    onLoadedMetaData(val,item) {
      item.audio_duration = val.target.duration;
      this.$set(item)
    },
    //改变播放按钮
    changePlay(val,item) {
      let that = this;
      if (item.audio_play === false) {
        item.audio_play = true;
        this.audioPlay(item.voice_num);
      } else if(item.audio_play === true) {
        item.audio_play = false;
        this.audioPause(item.voice_num);
      }
      this.$forceUpdate();
      this.$set(that.wechat_info,item)
    },
    //播放录音
    audioPlay(voice_num) {
      let val = this.$refs.audio;
      val[voice_num].play();
    },
    //暂停录音
    audioPause(voice_num) {
      let val = this.$refs.audio;
      val[voice_num].pause();
    },
    //更新当前播放时间
    onTimeUpdate(val,item) {
      let that = this;
      item.audio_currentTime = val.target.currentTime;
      if(item.audio_play === false){
        item.audio_play = false;
      }else if(item.audio_play === true){
        item.audio_play = item.audio_currentTime === item.audio_duration ? false : true;
      }
      this.$forceUpdate();
      this.$set(that.wechat_info,item)
    }
  }
}
</script>

<style lang="less" scoped>
.customer{
  display:flex;
  .visited_info,.add_visited{
    width:48%;
    background-color:#F8F9FB;
    border-radius:5px;
    padding-top:16px;
    padding-bottom:13px;
    box-sizing:border-box;
    .visited_header{
      margin-bottom: 14px;
      span{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2B3A4F;
        margin-left:15px;
        margin-bottom:14px;
      }
    }
    .line{
      display:block;
      width:100%;
      height:1px;
      background-color:rgba(43, 58, 79, 0.06);
      margin-bottom:20px;
    }
  }
  .visited_info{
    margin-right:20px;
    .detail{
      padding-left:14px;
      padding-right:15px;
      box-sizing:border-box;
      .doctor_info{
        display:flex;
        margin-bottom:35px;
        .doctor_avtar{
          .avatar{
            height: 82px;
            width: 82px;
            color: #000;
            background-color: #C0C4CC;
            box-sizing: border-box;
            text-align: center;
            border-radius: 4px;
            font-size:50px;
            display:flex;
            justify-content:center;
            align-items: center;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight:300;
          }
        }
        .specific_info{
          margin-left:22px;
          div{
            margin-bottom:12px;
          }
          .doctor_name{
            display:flex;
            align-items:center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2B3A4F;
            span{
              margin-right:7px;
            }
            img{
              width:12px;
              height:12px;
            }
          }
          .address{
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2B3A4F;
          }
          .unknow_info{
            width: 35px;
            height: 18px;
            background-color: #FFA940;
            border-radius: 2px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            display:flex;
            justify-content:center;
            align-items:center;
          }
          .promit{
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2B3A4F;
            span:first-child{
              color:#409EFF;
              margin-right:7px;
            }
            span:last-child{
              color: rgba(137, 152, 172, 1);
            }
          }
        }
      }
      .record{
        /deep/.el-tabs{
          .el-tabs__header{
            margin-bottom:19px;
            .el-tabs__nav-wrap{
              .el-tabs__nav-scroll{
                .el-tabs__nav{
                  .el-tabs__active-bar{
                    background-color:rgba(59, 124, 255, 1);
                  }
                  .el-tabs__item.is-active{
                    color:rgba(59, 124, 255, 1);
                  }
                  .el-tabs__item:hover{
                    color:rgba(59, 124, 255, 1);
                  }
                }
              }
            }
            .el-tabs__nav-wrap::after{
              background-color:transparent;
            }
          }
          .el-tabs__content{
            .el-tab-pane{
              .basic_info{
                min-width: 38vw;
                background-color:rgba(255, 255, 255, 1);
                border-radius:5px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2B3A4F;
                line-height: 20px;
                padding:25px 0 1px 25px;
                .doctor_info{
                  margin-bottom:38px;
                }
                .hosiptal_address{
                  display:flex;
                  align-items:center;
                }
                .product_name{
                  display:flex;
                  align-items:center;
                  .el-select{
                    .el-input{
                      input{
                        height:30px;
                      }
                      .el-input__suffix{
                        .el-input__suffix-inner{
                          .el-input__icon{
                            line-height:30px;
                          }
                        }
                      }
                    }
                  }
                }
              }
              ul,li{
                list-style:none;
              }
              .visited_record{
                .record_info{
                  width:50vw;
                  height:131px;
                  background-color:#FFFFFF;
                  border-radius:5px;
                  margin-bottom:13px;
                  border-radius:5px;
                  .name_time{
                    height:44px;
                    display:flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    span:first-child{
                      margin-left:12px;
                      margin-right:8px;
                      color: #2B3A4F;
                    }
                    span:last-child{
                      color: #8998ac;
                    }
                  }
                  .record_line{
                    width:50vw;
                    height:1px;
                    background-color:rgba(43, 58, 79, 0.06);
                  }
                  .visited_record_info{
                    width:42.5vw;
                    height:66%;
                    padding-left:12px;
                    box-sizing:border-box;
                    display:flex;
                    flex-direction: column;
                    padding-top:16px;
                    padding-right:12px;
                    .info1{
                      margin-left:12px;
                      display:flex;
                      div:first-child{
                        margin-right:164px;
                      }
                    }
                    .info1:first-child{
                      margin-bottom:15px;
                    }
                    .info1:last-child{
                      div:first-child{
                        margin-right:169px;
                      }
                    }
                  }
                }
              }
              .wechat_rept{
                margin-bottom: 20px;
                font-size:14px;
                .name{
                  padding-right:10px;
                }
                /deep/.el-select{
                  .el-input{
                    .el-input__inner{
                      height: 33px;
                      width: 154px;
                    }
                    .el-input__suffix{
                      .el-input__suffix-inner{
                        .el-input__icon{
                            line-height:33px;
                        }
                      }
                    }
                  }
                }
              }
              .wx_chat_record{
                width:100%;
                height:393px;
                background-color:#FFFFFF;
                position: relative;
                display:flex;
                flex-direction:column;
                .up{
                  height:5%;
                  display:flex;
                  justify-content:center;
                  align-items:flex-end;
                  div{
                    width: 143px;
                    height: 40px;
                    border-radius: 25px;
                    border: 1px solid #E6EDFE;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #3B4859;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    cursor: pointer;
                    img{
                      margin-right:12px;
                    }
                  }
                }
                .content{
                  padding:8px 10px 0px 10px;
                  overflow:auto;
                  height:91%;
                  .main{
                    margin-bottom:12px;
                    .talk_content{
                      display:flex;
                      align-items: center;
                      .user_name{
                        display:inline-flex;
                        justify-content:center;
                        align-items:center;
                        width: 40px;
                        height: 40px;
                        background-color: #3B7CFF;
                        border-radius:50%;
                        font-size: 17px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-right:12px;
                      }
                      .talk{
                        display:inline-flex;
                        align-items: center;
                        background-color:#FFFFFF;
                        border-radius:8px;
                        padding:10px 16px 10px 16px;
                        border: 1px solid #E6EDFE;
                        box-sizing:border-box;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2B3A4F;
                        position:relative;
                        .el-link.el-link--default:hover{
                          color:#606266;
                        }
                        .audio{
                          display:flex;
                          align-items: center;
                          transform:translateX(-20px);
                          .small{
                            width: 20px;
                            height: 14px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            color:#A2A2A2;
                          }
                          .middle{
                            width: 30px;
                            height: 24px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            margin-left: -22px;
                            animation: show2 3s ease-in-out infinite;
                            opacity: 1;
                            color:#A2A2A2;
                          }
                          @keyframes show2 {
                            0% { opacity: 0;}
                            30% { opacity: 1;}
                            100% { opacity: 0;}
                          }
                          .cricleplay{
                            width: 100%;
                            margin-right: 23px;
                          }
                          .large{
                            width: 40px;
                            height: 34px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-top-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            margin-left: -32px;
                            animation: show3 3s ease-in-out infinite;
                            opacity: 1;
                            color:#A2A2A2;
                          }
                          @keyframes show3 {
                            0% { opacity: 0;}
                            60% { opacity: 1;}
                            100% { opacity: 0;}
                          }
                          .stopanimate{
                            animation-name: none;
                          }
                        }
                      }
                      .talk::before{
                        content:"";
                        width:0px;
                        height:0px;
                        border-top: 8px solid transparent;
                        border-left: 30px solid transparent;
                        border-right: 8px solid#E6EDFE;
                        border-bottom: 8px solid transparent;
                        position:absolute;
                        left:-38px;
                      }
                      .talk::after{
                        content:"";
                        width:0px;
                        height:0px;
                        border-top: 8px solid transparent;
                        border-left: 30px solid transparent;
                        border-right: 8px solid #FFFFFF;
                        border-bottom: 8px solid transparent;
                        position:absolute;
                        left:-37px;
                      }
                    }
                    .talk_time{
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #8998AC;
                      margin-left:53px;
                      margin-top:4px;
                    }
                  }
                  .main_right{
                    margin-bottom:12px;
                    display:flex;
                    flex-direction:column;
                    .talk_content_right{
                      align-self:flex-end;
                      display:flex;
                      align-items: center;
                      justify-content: flex-end;
                      .user_name_right{
                        display:inline-flex;
                        justify-content:center;
                        align-items:center;
                        width: 40px;
                        height: 40px;
                        background-color:#27DAAD;
                        border-radius:50%;
                        font-size: 17px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-left:12px;
                      }
                      .talk_right{
                        display:inline-flex;
                        align-items: center;
                        background-color:#E6EDFE;
                        border-radius:8px;
                        padding:10px 16px 10px 16px;
                        border: 1px solid #E6EDFE;
                        box-sizing:border-box;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2B3A4F;
                        position:relative;
                        .el-link.el-link--default:hover{
                          color:#606266;
                        }
                        .audio{
                          display:flex;
                          align-items: center;
                          transform:translateX(-20px);
                          .small{
                            width: 20px;
                            height: 14px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            color:#A2A2A2;
                          }
                          .middle{
                            width: 30px;
                            height: 24px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            margin-left: -22px;
                            animation: show2 3s ease-in-out infinite;
                            opacity: 1;
                            color:#A2A2A2;
                          }
                          @keyframes show2 {
                            0% { opacity: 0;}
                            30% { opacity: 1;}
                            100% { opacity: 0;}
                          }
                          .cricleplay{
                            width: 100%;
                            margin-right: 23px;
                          }
                          .large{
                            width: 40px;
                            height: 34px;
                            border-style: solid;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-color: transparent;
                            border-top-color: transparent;
                            border-radius: 50%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            display: inline-block;
                            margin-left: -32px;
                            animation: show3 3s ease-in-out infinite;
                            opacity: 1;
                            color:#A2A2A2;
                          }
                          @keyframes show3 {
                            0% { opacity: 0;}
                            60% { opacity: 1;}
                            100% { opacity: 0;}
                          }
                          .stopanimate{
                            animation-name: none;
                          }
                        }
                      }
                      .talk_right::before{
                        content:"";
                        width:0px;
                        height:0px;
                        border-top: 8px solid transparent;
                        border-left: 8px solid #E6EDFE;
                        border-right: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                        position:absolute;
                        right:-16px;
                      }
                    }
                    .talk_time_right{
                      align-self:flex-end;
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #8998AC;
                      margin-right:53px;
                      margin-top:4px;
                    }
                  }
                  .talk_flex{
                    flex:1;
                  }
                  .talk_image{
                    width:20%;
                    height:20%;
                    .el-image-viewer__wrapper{
                      .el-image-viewer__close{
                        color:#fff;
                      }
                    }
                  }
                  .talk_link{
                    width:230px;
                    .el-link{
                      width:100%;
                      .el-link--inner{
                        width:100%;
                        h4{
                          margin-top:0;
                          margin-bottom: 13px;
                          font-size:14px;
                          overflow:hidden;
                          text-overflow:ellipsis;
                          display:-webkit-box;
                          -webkit-box-orient:vertical;
                          -webkit-line-clamp:2;
                        }
                        .description{
                          display:flex;
                          div{
                            width: 142px;
                            height: 40px;
                            margin-right:10px;
                            font-size:12px;
                            color: #a5a5a5;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            display:-webkit-box;
                            -webkit-box-orient:vertical;
                            -webkit-line-clamp:3;
                          }
                          img{
                            width:42px;
                            height:42px;
                          }
                        }
                      }
                    }
                  }
                  .talk_audio{
                    height:37px;
                    cursor: pointer;
                  }
                }
                .down{
                  width:100%;
                  position:absolute;
                  bottom:11px;
                  div{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    img{
                      cursor: pointer;
                    }
                  }
                }
              }
              .wechat_result_info{
                height: 797px;
                overflow:auto;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2B3A4F;
                .wechat_result{
                  line-height: 20px;
                  margin-bottom:13px;
                  background-color:#FFFFFF;
                  border-radius: 5px;
                  padding: 10px 0 10px 10px;
                  box-sizing: border-box;
                  .communicate_result{
                    margin-bottom:7px;
                  }
                }
              }

            }
          }
        }
      }
    }
  }
  .add_visited{
    .add_visited_info{
      height:271px;
      position:relative;
      box-sizing:border-box;
      overflow:auto;
      margin-bottom:30px;
      .visited_info1{
        .visited_result{
          padding-left:12px;
          padding-right:12px;
          box-sizing:border-box;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-bottom: 30px;
          .visit{
            margin-bottom:30px;
          }
        }
      }
    }
    .call{
      .call_info{
        padding-left:12px;
        padding-right:12px;
        box-sizing:border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2B3A4F;
        height: 425px;
        overflow:auto;
        div{
            margin-bottom:30px;
            .el-rate{
                margin-bottom:0px;
            }
        }
        .doctor_attitude{
          display:flex;
        }
        .success_recruiting{
            font-size: 14px;
        }
      }
    }
  }
}
</style>
